/* color palette from <https://github.com/vuejs/theme> */
/* 声明新字体 */
@font-face {
    font-family: 'YunFengHanChanTi';
    src: url('./fonts/YunFengHanChanTi-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* 基础颜色系统 - 这些颜色不会随主题变化 */
    --vt-c-gray-900: #111827;
    --vt-c-gray-800: #1f2937;
    --vt-c-gray-700: #374151;
    --vt-c-gray-600: #4b5563;
    --vt-c-gray-500: #6b7280;
    --vt-c-gray-400: #9ca3af;
    --vt-c-gray-300: #d1d5db;
    --vt-c-gray-200: #e5e7eb;
    --vt-c-gray-100: #f3f4f6;
    --vt-c-white: #ffffff;
  
    --vt-c-blue-600: #2563eb;
    --vt-c-indigo-600: #4f46e5;
    
    /* 功能颜色 */
    --vt-c-success: #10b981;
    --vt-c-warning: #f59e0b;
    --vt-c-danger: #ef4444;
    --vt-c-info: #3b82f6;
  }
  
  /* 默认浅色主题 - 基础主题 */
  :root {
    /* 主题基色 */
    --theme-background: var(--vt-c-white);
    --theme-background-soft: var(--vt-c-gray-100);
    --theme-background-mute: var(--vt-c-gray-200);
    
    --theme-text: var(--vt-c-gray-800);
    --theme-text-secondary: var(--vt-c-gray-500);
    --theme-text-tertiary: var(--vt-c-gray-400);
    
    --theme-border: var(--vt-c-gray-200);
    --theme-border-hover: var(--vt-c-gray-300);
    
    --theme-heading: var(--vt-c-gray-900);
    --theme-link: var(--vt-c-blue-600);
    --theme-link-hover: var(--vt-c-indigo-600);
    
    --theme-surface: var(--vt-c-white);
    --theme-surface-soft: var(--vt-c-gray-50);
    
    /* 组件特定颜色 */
    --theme-card-bg: var(--vt-c-white);
    --theme-card-border: var(--vt-c-gray-200);
    --theme-card-hover: var(--vt-c-gray-50);
    
    --theme-button-bg: var(--vt-c-gray-100);
    --theme-button-hover: var(--vt-c-gray-200);
    --theme-button-active: var(--vt-c-gray-300);
    
    --theme-input-bg: var(--vt-c-white);
    --theme-input-border: var(--vt-c-gray-300);
    --theme-input-focus: var(--vt-c-blue-600);
  }
  
  /* 语义化颜色变量 - 供全局使用 */
  :root {
    /* 主内容区域颜色 */
    --color-background: var(--theme-background);
    --color-background-soft: var(--theme-background-soft);
    --color-background-mute: var(--theme-background-mute);
    
    /* 边框颜色 */
    --color-border: var(--theme-border);
    --color-border-hover: var(--theme-border-hover);
    
    /* 文本颜色 */
    --color-text: var(--theme-text);
    --color-text-secondary: var(--theme-text-secondary);
    --color-text-tertiary: var(--theme-text-tertiary);
    --color-heading: var(--theme-heading);
    
    /* 链接颜色 */
    --color-link: var(--theme-link);
    --color-link-hover: var(--theme-link-hover);
    
    /* 间距 */
    --section-gap: 160px;
  }
  

  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    position: relative;
    font-weight: normal;
  }
  
  body {
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-background);
    transition: color 0.3s, background-color 0.3s;
    line-height: 1.6;
    font-family: 'YunFengHanChanTi', sans-serif !important;
    font-size: 15px;
    letter-spacing: 0.4px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 全局段落样式 */
  p {
    font-family: 'YunFengHanChanTi', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.6px !important;
    font-weight: 400 !important;
  }

  /* 全局标题样式 */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'YunFengHanChanTi', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
  }

  /* 全局span样式 */
  span {
    font-family: 'YunFengHanChanTi', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.4px !important;
    font-weight: 400 !important;
  }

  /* 链接样式 */
  a {
    font-family: 'YunFengHanChanTi', sans-serif !important;
    letter-spacing: 0.3px !important;
    color: var(--color-link);
    transition: all 0.3s ease;
  }
  
  a:hover {
    color: var(--color-link-hover) !important;
  }
  
  /* 确保所有输入元素遵循主题 */
  input, textarea, select {
    background-color: var(--theme-input-bg);
    color: var(--theme-text);
    border-color: var(--theme-input-border);
  }
  
  input:focus, textarea:focus, select:focus {
    border-color: var(--theme-input-focus) !important;
    outline: none;
  }
  
  /* 确保所有按钮遵循主题 */
  button {
    background-color: var(--theme-button-bg);
    color: var(--theme-text);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }
  
  button:hover {
    background-color: var(--theme-button-hover) !important;
    border-color: var(--theme-border-hover) !important;
  }
  
  /* 确保所有卡片遵循主题 */
  .card, .card-like {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
  }
  
  .card:hover, .card-like:hover {
    background-color: var(--theme-card-hover) !important;
  }

  /* 深色主题 - 系统偏好 */
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      /* 主题基色 - 深色模式 */
      --theme-background: #111828 !important; /* 与深色主题背景色一致 */
      --theme-background-soft: var(--vt-c-gray-800);
      --theme-background-mute: var(--vt-c-gray-700);
      
      --theme-text: var(--vt-c-gray-100);
      --theme-text-secondary: var(--vt-c-gray-400);
      --theme-text-tertiary: var(--vt-c-gray-500);
      
      --theme-border: var(--vt-c-gray-700);
      --theme-border-hover: var(--vt-c-gray-600);
      
      --theme-heading: var(--vt-c-white);
      --theme-link: var(--vt-c-blue-600);
      --theme-link-hover: var(--vt-c-indigo-600);
      
      --theme-surface: var(--vt-c-gray-800);
      --theme-surface-soft: var(--vt-c-gray-700);
      
      /* 组件特定颜色 - 深色模式 */
      --theme-card-bg: var(--vt-c-gray-800);
      --theme-card-border: var(--vt-c-gray-700);
      --theme-card-hover: var(--vt-c-gray-700);
      
      --theme-button-bg: var(--vt-c-gray-800);
      --theme-button-hover: var(--vt-c-gray-700);
      --theme-button-active: var(--vt-c-gray-600);
      
      --theme-input-bg: var(--vt-c-gray-800);
      --theme-input-border: var(--vt-c-gray-700);
      --theme-input-focus: var(--vt-c-blue-600);
    }
  }
  
  /* 深色主题 - 手动切换 */
  :root.dark {
    /* 主题基色 - 深色模式 */
    --theme-background: #111828 !important; /* 与深色主题背景色一致 */
    --theme-background-soft: var(--vt-c-gray-800);
    --theme-background-mute: var(--vt-c-gray-700);
    
    --theme-text: var(--vt-c-gray-100);
    --theme-text-secondary: var(--vt-c-gray-400);
    --theme-text-tertiary: var(--vt-c-gray-500);
    
    --theme-border: var(--vt-c-gray-700);
    --theme-border-hover: var(--vt-c-gray-600);
    
    --theme-heading: var(--vt-c-white);
    --theme-link: var(--vt-c-blue-600);
    --theme-link-hover: var(--vt-c-indigo-600);
    
    --theme-surface: var(--vt-c-gray-800);
    --theme-surface-soft: var(--vt-c-gray-700);
    
    /* 组件特定颜色 - 深色模式 */
    --theme-card-bg: var(--vt-c-gray-800);
    --theme-card-border: var(--vt-c-gray-700);
    --theme-card-hover: var(--vt-c-gray-700);
    
    --theme-button-bg: var(--vt-c-gray-800);
    --theme-button-hover: var(--vt-c-gray-700);
    --theme-button-active: var(--vt-c-gray-600);
    
    --theme-input-bg: var(--vt-c-gray-800);
    --theme-input-border: var(--vt-c-gray-700);
    --theme-input-focus: var(--vt-c-blue-600);
  }
  
  /* 浅色主题 - 手动切换 */
  :root.light {
    /* 主题基色 - 浅色模式 */
    --theme-background: var(--vt-c-white);
    --theme-background-soft: var(--vt-c-gray-100);
    --theme-background-mute: var(--vt-c-gray-200);
    
    --theme-text: var(--vt-c-gray-800);
    --theme-text-secondary: var(--vt-c-gray-500);
    --theme-text-tertiary: var(--vt-c-gray-400);
    
    --theme-border: var(--vt-c-gray-200);
    --theme-border-hover: var(--vt-c-gray-300);
    
    --theme-heading: var(--vt-c-gray-900);
    --theme-link: var(--vt-c-blue-600);
    --theme-link-hover: var(--vt-c-indigo-600);
    
    --theme-surface: var(--vt-c-white);
    --theme-surface-soft: var(--vt-c-gray-50);
    
    /* 组件特定颜色 - 浅色模式 */
    --theme-card-bg: var(--vt-c-white);
    --theme-card-border: var(--vt-c-gray-200);
    --theme-card-hover: var(--vt-c-gray-50);
    
    --theme-button-bg: var(--vt-c-gray-100);
    --theme-button-hover: var(--vt-c-gray-200);
    --theme-button-active: var(--vt-c-gray-300);
    
    --theme-input-bg: var(--vt-c-white);
    --theme-input-border: var(--vt-c-gray-300);
    --theme-input-focus: var(--vt-c-blue-600);
  }
  